<template>
  <div class="page_body">
    <div class="login_body" v-if="isWeixin">
      <img class="login_body_bg" src="../../assets/image/login_bg03.png" />
      <div class="login_btn_box">
        <div
          class="login_btn"
          style="margin-bottom: 1.4rem"
          @click="wxLoginFn()"
        >
          <!-- <div class="login_btn" style="margin-bottom: 0.98rem" @click="testFn()"> -->
          登录/login
        </div>
        <div class="login_bottom_logo_box">
          <img
            class="login_bottom_logo"
            src="../../assets/image/login_bottom_logo02.png"
            style="width: 1.1rem"
          />
          <img
            class="login_bottom_logo"
            src="../../assets/image/login_bottom_logo01.png"
            style="width: 1rem"
          />
          <img
            class="login_bottom_logo"
            src="../../assets/image/login_bottom_logo03.png"
            style="width: 2.5rem; margin-right: 0"
          />
        </div>
      </div>
    </div>
    <div v-else class="phone_login_body">
      <img
        class="phone_login_body_bg"
        src="../../assets/image/login_bg01.png"
      />
      <div class="phone_login_box">
        <div class="phone_login_box_title">手机验证码登录</div>
        <div class="phone_login_box_item">
          <div class="phone_login_box_item_name">手机号</div>
          <div class="phone_login_box_item_input_box">
            <input
              id="phone_login_step_item_input"
              type="number"
              placeholder="请输入您的手机号"
              v-model="phone"
            />
            <div
              :class="[
                getCodeKey
                  ? 'register_from_item_get_code_btn'
                  : 'register_from_item_get_code_btn disabled_send',
              ]"
              @click="getCodeFn()"
            >
              {{ getCodeTime }}
            </div>
          </div>
        </div>

        <div class="phone_login_box_item">
          <div class="phone_login_box_item_name">验证码</div>
          <div class="phone_login_box_item_input_box">
            <input
              id="phone_login_step_item_input_code"
              type="number"
              placeholder="请输入您的验证码"
              v-model="code"
            />
          </div>
        </div>

        <div @click="phoneLoginBtn()" class="phone_login_box_btn">登录</div>
      </div>

      <div class="phone_login_box_item logo_box">
        <img
          class="phone_login_box_logo"
          src="../../assets/image/login_bottom_logo01.png"
          style="width: 1rem"
        />
        <img
          class="phone_login_box_logo"
          src="../../assets/image/login_bottom_logo02.png"
          style="width: 0.9rem"
        />
        <img
          class="phone_login_box_logo"
          src="../../assets/image/login_bottom_logo03.png"
          style="width: 2.5rem"
        />
      </div>
    </div>
  </div>
</template>
<style src="../../assets/css/home/login.css" scoped></style>

<script>
import { Toast } from "mint-ui";

export default {
  name: "Login",
  components: {},
  data() {
    return {
      beforePath: "",
      isWeixin: false, // 是否为微信环境
      phone: "", // 手机号
      phoneShow: "", // 手机号显示
      code: "", // 校验码
      getCodeTime: "获取验证码", // 验证码时间
      getCodeKey: true, // 获取验证码控制
    };
  },
  created: function () {
    this.beforePath = this.$route.params.redirect;
    if (this.beforePath) {
      this.$store.commit("set_beforePath", this.beforePath);
    }
    // console.log(this.$store.state.before_Path);
    let query = this.$route.query;
    if (query.code) {
      this.sendlCodeFn(query.code);
    }

    let ua = navigator.userAgent.toLowerCase();
    this.isWeixin = ua.indexOf("micromessenger") != -1;
  },
  methods: {
    // 设置重新获取验证码时间
    setCodeTimeFn: function () {
      let that = this;
      let time = 30;
      this.codeInterval = setInterval(function () {
        if (time > 0) {
          that.getCodeTime = "重新发送(" + time + ")";
          time = time - 1;
        } else {
          that.getCodeTime = "获取验证码";
          that.getCodeKey = true;
          clearInterval(that.codeInterval);
        }
      }, 1000);
    },
    // 获取验证码
    getCodeFn: function () {
      let that = this;
      if (this.phone == "") {
        Toast({
          message: "手机号不能为空",
        });
        return;
      } else {
        let telText =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
        if (!telText.test(this.phone)) {
          Toast({
            message: "手机号格式不正确",
          });
          return false;
        } else {
          if (this.getCodeKey) {
            let url = "/mobile/getPhoneCode";
            let data = {
              phone: that.phone,
            };
            that.getCodeKey = false;
            that.setCodeTimeFn();
            that.axios
              .post(url, data)
              .then((response) => {
                if (response.code != 0) {
                  that.getCodeKey = true;
                  clearInterval(that.codeInterval);
                  that.getCodeTime == "获取验证码";
                  Toast({
                    message: response.msg,
                    duration: 3000,
                  });
                }
              })
              .catch(function (error) {
                that.getCodeKey = true;
                that.getCodeTime = "获取验证码";
                clearInterval(that.codeInterval);
                console.log(error);
              });
          }
        }
      }
    },
    // 手机号登录
    phoneLoginBtn: function () {
      let that = this;
      let url = "/mobile/phoneLogin";
      let data = {
        phone: that.phone,
        phone_code: that.code,
      };
      if (this.phone == null || this.phone == "" || this.phone == undefined) {
        Toast({
          message: "手机号不能为空",
        });
        return;
      }
      if (this.code == null || this.code == "" || this.code == undefined) {
        Toast({
          message: "校验码不能为空",
        });
        return;
      }
      that.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.$store.commit("set_loginToken", response.token);
            that.$store.commit("set_loginUserId", response.userid);
            that.$store.commit("set_hasPhone", 2);
            // console.log(this.beforePath);
            // console.log(this.$store.state.before_Path);
            let before_Path = this.$store.state.before_Path;
            if (before_Path !== "/") {
              that.$router.replace({
                path: before_Path,
              });
            }
            // if (this.beforePath !== "/") {
            //   that.$router.replace({
            //     path: this.beforePath,
            //   });
            // }
            else {
              that.$router.replace({
                name: "gameCenter",
              });
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 微信授权登录
    wxLoginFn: function () {
      let appid = "wx9271f3e414dea712";
      // let redirect_uri = "https://shslqxh.1meeting.com/coach/login";
      let redirect_uri = "https://shslqxh.1meeting.com/event/login";
      // let redirect_uri = "https://shslqxh.1meeting.com/testevent/login"; //测试路径
      // if (this.beforePath !== "/") {
      //   redirect_uri = `https://shslqxh.1meeting.com/event/${this.beforePath}`
      //
      // }
      let response_type = "code";
      let scope = "snsapi_userinfo";
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        appid +
        "&redirect_uri=" +
        redirect_uri +
        "&response_type=" +
        response_type +
        "&scope=" +
        scope +
        "&state=STATE#wechat_redirect";
    },
    // 发送code到后端换取用户信息及token
    sendlCodeFn: function (code) {
      // console.log(this.beforePath);
      let that = this;
      let url = "/mobile/login";
      let data = {
        code: code,
      };
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.$store.commit("set_loginToken", response.token);
            that.$store.commit("set_loginUserId", response.userid);
            if (
              response.phone == "" ||
              response.phone == null ||
              response.phone == undefined
            ) {
              that.$store.commit("set_hasPhone", 1);
              that.$router.replace({
                name: "BindPhone",
              });
            } else {
              that.$store.commit("set_hasPhone", 2);
              console.log(this.$store.state.before_Path);

              let before_Path = this.$store.state.before_Path;
              if (before_Path !== "/") {
                that.$router.replace({
                  path: before_Path,
                });
              }
              // if (this.beforePath !== "/") {
              //   that.$router.replace({
              //     path: this.beforePath,
              //   });
              // }
              else {
                that.$router.replace({
                  name: "gameCenter",
                });
              }
              // that.$router.replace({
              //   name: "gameCenter",
              // });
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 测试登录
    testFn: function () {
      let that = this;
      let url = "/mobile/login";
      let data = {
        code: "",
        login_userid: "13",
      };
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.$store.commit("set_loginToken", response.token);
            that.$store.commit("set_loginUserId", response.userid);
            if (
              response.phone == "" ||
              response.phone == null ||
              response.phone == undefined
            ) {
              that.$store.commit("set_hasPhone", 1);
              that.$router.replace({
                name: "BindPhone",
              });
            } else {
              that.$store.commit("set_hasPhone", 2);
              console.log(document.referrer, "0000");
              that.$router.replace({
                name: "gameCenter",
              });
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //登录后获取用户信息
  },
};
</script>
